<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<form action="#" @submit.prevent="submitForm">
				姓名：<input type="text" v-model="name"/><br>
				性别：<input type="radio"  value="男" v-model="sex" />男
					<input type="radio"  value="女" v-model="sex" />女<br>
				技能：<input type="checkbox" value="vue" v-model="skills"/>vue
				<input type="checkbox" value="java" v-model="skills"/>java
				<input type="checkbox" value="python" v-model="skills" />python
				城市：
				<select name="" v-model="city">
					<option v-for="c in citys" :value="c.code">
						{{c.name}}
					</option>
				</select>

			</form>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					name:"",
					sex:"男",
					skills:["vue","python"],
					citys:[
						{code:"sh",name:"上海"},
						{code:"bj",name:"北京"}
					],
					city:"sh"
					
				},
				methods:{
					submitForm(){
						alert(this.name)
					}
					
				}
				
			})
		</script>
	</body>
</html>
